<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>霸下社区-首页</title>
    <div data-th-replace="~{fragment/common :: common}"></div>
</head>
<body>
<div data-th-replace="~{fragment/header :: header}"></div>
<!-- Page Content -->
<div class="container body-container">
    <div class="col-sm-8 index-content">
        <div class="col-sm-12">
            <ul class="nav nav-tabs" style="padding-top: 10px;">
                <li role="presentation" data-th-class="${activeTab=='new'?'active':''}">
                    <a data-th-href="@{'/blog?order=new'}">最新</a>
                </li>
                <li role="presentation" data-th-class="${activeTab=='hot'?'active':''}">
                    <a data-th-href="@{'/blog?order=hot'}">最热</a>
                </li>
            </ul>
            <div class="col-sm-12 card" style="padding:0;margin-top:10px;border-bottom:1px solid #DDDDDD"
                 data-th-each="article : ${records}">
                <div class="card-side" style="min-height:70px;width: 50px;float: left;">
                    <a data-th-href="@{'/u/'+${article.username}}"><img data-th-src="@{'/'+${article.userFace}}"
                                                                        style="width: 40px;height:40px;margin-top:13px "
                                                                        alt=""></a>
                </div>
                <div class="card-center">
                    <div class="card-header" style="height:70px;width: 100%">
                        <div style="height: 40px;overflow:hidden;text-overflow:ellipsis;" class="text-nowrap">
                            <a data-th-href="@{'/blog/a/'+${article.id}}" class="article-title"
                               data-th-text="${article.title}"></a>
                        </div>
                        <div style="margin-top: 2px">
                            <a class="author-div hidden-xs" data-th-href="@{'/u/'+${article.username}}"
                               data-th-text="${article.userNicName}"></a>
                            <span class="tag-div">
                                <span class="glyphicon glyphicon-time"></span>
                                <span data-th-text="${#dates.format(article.createTime,'yyyy/MM/dd HH:mm')}"></span>
                            </span>
                            <a class="tag-div" data-th-href="@{'/u/'+${article.username}+'/blog?tab=category'}">
                                <span class="glyphicon glyphicon-th-large"></span>
                                <span data-th-text="${article.categoryName}"></span>
                            </a>
                        </div>
                    </div>
                    <div class="card-body" style="margin: 0 0 8px 0" data-th-text="${article.summary}"></div>
                    <div class="card-footer" style="height: 30px;width: 100%">
                        <span data-th-each="tag : ${article.tags}" class="">
                            <a class="tag-div" data-th-href="@{'/blog/t/'+${tag.name}}">
                                <span class="glyphicon glyphicon-tag"></span>
                                <span data-th-text="${tag.name}"></span>
                            </a>
                        </span>
                        <span style="float:right;">
                            <span class="tag-div">
                                <span class="glyphicon glyphicon-eye-open"></span>
                                <span data-th-text="${article.readCount}"></span>
                            </span>

                            <span class="tag-div">
                                <span class="glyphicon glyphicon-comment"></span>
                                <span data-th-text="${article.commentCount}"></span>
                            </span>
                            <span class="tag-div">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                                <span data-th-text="${article.voteCount}"></span>
                            </span>
                        </span>
                    </div>
                </div>
            </div>


        </div>
        <!-- Pagination -->
        <div data-th-replace="~{fragment/page :: page(url='/blog?order='+${activeTab}+'&')}">...</div>
    </div>
    <!-- 右侧栏目 -->
    <div class="col-sm-4 index-sidebar" data-th-insert="~{fragment/index-sidebar :: index-sidebar}">
    </div>
</div>


<div data-th-replace="~{fragment/footer :: footer}">...</div>
</body>
</html>